<template>
  <div class="gwyh-wrap">
    <dx-Wrap :name="''">
      <template v-slot:content>
<!--        <div class="gyurl-btn-wrap">-->
<!--          <div class="btn-item" :class="[ (btnChecked === 1 ? 'btn-checked' : null)]"-->
<!--            @click="checkBtn(1)"-->
<!--          >-->
<!--            今日-->
<!--          </div>-->
<!--          <div class="btn-item" :class="[ (btnChecked === 2 ? 'btn-checked' : null)]"-->
<!--               @click="checkBtn(2)"-->
<!--          >-->
<!--            本周-->
<!--          </div>-->
<!--          <div class="btn-item" :class="[ (btnChecked === 3 ? 'btn-checked' : null)]"-->
<!--               @click="checkBtn(3)"-->
<!--          >-->
<!--            本月-->
<!--          </div>-->
<!--        </div>-->
        <div class="echarts-bg"
          :style="{backgroundImage: `url(${imgUrl})`}"
        >

        </div>
        <div id="gwyhEcharts" style="height: 100%;"></div>
      </template>
    </dx-Wrap>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import tsCol from '@/components/left/tsCol'
    import dxWrap from '@/components/customComponents/dxWrap.component'
    import api from "@/api/common.api";
    export default {
        components: {
            // commonDialog,
            // commonForm,
            // commonWrap,
            dxWrap,
        },
        data () {
            return {
                imgUrl: '',
                echartsTimer: null,
                btnChecked: 1,
                dialogfieldsList: [
                    // {
                    //     type: 'dict',
                    //     code: 'alarmFklx',
                    //     name: '反馈类型',
                    //     placeholder: '请选择',
                    //     options: [
                    //         {
                    //             code: '1',
                    //             name: '🍉'
                    //         },
                    //     ]
                    // },
                ],
                dialogTableHead: [
                    {
                        prop: 'alarmTime',
                        label: '干预域名',
                        width: 160
                    },
                    {
                        prop: 'alarmTime2',
                        label: '数据属地',
                    },
                    {
                        prop: 'alarmTime3',
                        label: '欺诈类型',
                    },
                    {
                        prop: 'alarmTime4',
                        label: '类型',
                    },
                ],
                dataList: []
            }
        },
        methods: {
            checkBtn (e) {
                // this.btnChecked = e
                api.hignRiskUserStatic().then(res=>{
                    this.dataList = res
                    this.initEchart()
                })
            },
            initEchart () {
                let noramlSize = 16;
                let nameList = []
                let dataArr = []
                this.dataList.forEach(v=>{
                    nameList.push(v.fraudType)
                    dataArr.push({value: v.fraudTotal, name: v.fraudType})
                })

                // nameList= ['名字1','名字2']
                // dataArr= [{value: 213, name: '名字1',},{value: 83, name: '名字2',},]
                var datas = {
                    imageUrl:
                        "",
                    // imageUrl2:
                    //     "",
                    colors: ["#3cabff", "#4bdcf9", "#2e89c6", "#3bb896", "#e54835"],
                    legendArr: nameList,
                    dataArr: dataArr,
                    company: ""
                };
                this.imgUrl = datas.imageUrl
                let option = {
                    color: datas.colors,
                    grid: {
                        left: "0%",
                        right: "7%",
                        bottom: "15%",
                        top: "5%"
                    },
                    // graphic: {
                    //     elements: [
                    //         {
                    //             type: "image",
                    //             style: {
                    //                 image: datas.imageUrl,
                    //                 width: '155',
                    //                 height: 150
                    //             },
                    //             left: "13%",
                    //             top: "12%"
                    //         },
                    //     ],
                    // },
                    tooltip: {
                        trigger: "item",
                        backgroundColor: "#f6f6f6",
                        textStyle: {
                            color: "#000"
                        },
                        formatter: "{b}: {c}"+datas.company+" ({d}%)"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 20,
                        top: 20,
                        bottom: 20,
                        data: nameList,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        }
                    },
                    animation: true,
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ["45%", "60%"],
                            center: ["150px", "50%"],
                            itemStyle: {
                                normal: {
                                    borderWidth: 0,
                                    borderColor: "rgb(19, 52, 116)"
                                }
                            },
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    formatter:function(v){
                                        return `{label|${v.name}}\n\n   {value|${v.data.value}}`
                                    },
                                    rich:{
                                        label:{
                                            color:"#fff",
                                            textAlign: 'center',
                                            fontSize:noramlSize
                                        },
                                        value:{
                                            color:"#3fb9f6",
                                            textAlign: 'center',
                                            fontSize:16
                                        }
                                    }
                                },
                                emphasis: {
                                    show: true,
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    lineStyle:{
                                        color:"#666"
                                    },
                                    length:5,
                                    length2:15,
                                }
                            },
                            data: datas.dataArr
                        },
                    ]
                };
                let myChart = this.$echarts.init(document.getElementById('gwyhEcharts'))

                if(this.echartsTimer){
                    clearInterval(this.echartsTimer)
                }
                var index = 0; //轮播标识
                var dynamisTime = 2000; //间隔时间
                var len = option.series[0].data.length; //轮播长度
                let _this = this
                function dynamic() {
                    _this.echartsTimer = setInterval(() => {
                        if (index >= len) {
                            index = 0;
                        }
                        if(option.series[0]){
                            if (index !== 0) {
                                option.series[0].data[index - 1].selected = false;
                            } else {
                                option.series[0].data[len - 1].selected = false;
                            }
                            option.series[0].data[index].selected = true;
                        }
                        index++;
                        myChart.setOption(option); //重新绘制
                    }, dynamisTime)
                }
                if(this.dataList.length > 1){
                    dynamic()
                }

                myChart.setOption(option)
            }

        },
        mounted() {
          this.checkBtn(1)
        },
        destroyed() {
            clearInterval(this.echartsTimer)
        }
    }
</script>
<style lang="stylus">
  .gwyh-wrap{
    height: 100%;
    position: relative;
    .echarts-bg{
      width: 100%;
      height: 100%;
      position: absolute;
      background-size: 180px 180px;
      background-position: 60px 13%;
      background-repeat: no-repeat;
    }
    .gyurl-btn-wrap {
      position: absolute;
      top: 0px;
      right: 5px;
      display: flex;

      .btn-item {
        padding: 1px 20px;
        border: 2px solid #102f59;
        background: #0e234d;
        color: #12416c;
        cursor: pointer;

        & + .btn-item {
          margin-left: 5px;
        }

        &:hover {
          color: #fff;
          background: #10355e;
          border-color: #1f648f;
        }

      }
      .btn-checked{
        color: #fff;
        background: #10355e;
        border-color: #1f648f;
      }
    }
  }
</style>
